<template>
	<view class="container">
		<view class="head">
			<!--地址状态-->
			<view class="express">
				<view class="left">
					<image src="../../static/wuliu.png" class="wuliuimg"></image>
			 
					<view class="wlstate">
						<text class="wlqs">{{trans_status_text}}</text>
						<text class="trace">物流公司:{{orderinfo.shop_express_name}}{{orderinfo.shop_express_number}}</text>
					<text  class="trace"></text>
					</view>
				</view>
 

			</view>
		</view>
		<view class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{orderinfo.cnname}}</text>
						<text class="mobile">{{orderinfo.recvmobile}}</text>
					</view>
					<text class="address">{{orderinfo.area_text}}{{orderinfo.address}}</text>
				</view>
			</view>
		</view>
	 

		<view class="goods-section">
			<view class="g-header b-b">
				<text class="name">商品列表</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,index) in suborders" :key="index">
				<image :src="item.product_image"></image>
				<view class="right">
					<text class="title clamp">{{item.product_title}}</text>
					<text class="spec">规格：{{item.specvalue_list}}</text>
					<view class="pbottom">
				<view class="price-box">
					<text class="price">￥{{item.product_saleprice}}</text>
					<text class="number">x{{item.product_num}}</text>
				</view>		
					<text class="shouhou" @click="applyservice(item)">申请售后</text>
					</view>
				
				</view>
			</view>

			<view class="orderinfo">
				<view class="remark">
					<text>订单备注</text>
					<text class="remark_content">{{orderinfo.remark}}</text>
				 
				</view>
				<view class="item">
					<view class="item-title">
						<text>商品总额</text>
					</view>
					<view>￥{{orderinfo.total_productprice}}</view>
				</view>
				<view class="item">
					<view class="item-title">
						<text>运费</text>
					</view>
					<view>￥{{orderinfo.express_amount}}</view>
				</view>
				<view class="item">
					<view class="item-title">
						<text>优惠金额</text>
					</view>
					<view style="color:#ff0000;">-￥{{orderinfo.total_discountamount}}</view>
				</view>

				<view class="item">
					<view class="item-title">
						<text>实付金额</text>
					</view>
					<view style="color:#ff0000;font-size: 36upx;">￥{{orderinfo.pay_totalamount}}</view>
				</view>
			</view>
		</view>

		<view class="orderinfo" style="margin-top: 20upx;">
			<view class="item">
				<view class="item-title">
					<text>订单号</text>
				</view>
				<view>{{orderinfo.orderno}}</view>
			</view>
			<view class="item">
				<view class="item-title">
					<text>下单时间</text>
				</view>
				<view>{{orderinfo.createtime_text}}</view>
			</view>

			<view class="item" v-if="orderinfo.pay_status !=0">
				<view class="item-title">
					<text>付款时间</text>
				</view>
				<view>{{orderinfo.pay_time_text}}</view>
			</view>
	 

		</view>


		<view class="order-footer">
			<view class="operbtn">
				
				<text class="fbtn fixexpress" @click="fixOrder" v-if="orderinfo.trans_status==1">确认收货</text>
				<text class="fbtn canelorder" v-if="orderinfo.pay_status==0 && orderinfo.status==0" @click="cannelorder">取消订单</text>
	
				<text class="fbtn ser-shouhou" v-if="orderinfo.comment_status==0" @click="opencomment">我要评论</text>
				 
					<!-- <text class="yticon icon-xiaoxi fbtn ser-kefu"> 联系客服</text> -->
							<text class="fbtn payit" v-if="orderinfo.pay_status==0" @click="payit()">立即支付</text>
			</view>
		</view>
		<uni-popup type="bottom" ref="popcomment">
		<view class="comment">
		 <view class="cmtheader"><text>发表评论</text></view>
			<radio-group @change="changecmtlevel">
			<view class="cmt-level">
			 	<label><radio value="1" checked="true"></radio>好评</label>	
				<label><radio value="2"></radio>中评</label>	
				<label><radio value="3"></radio>差评</label>	
			</view>
			</radio-group>
			<uni-easyinput class="cmtcontent" type="textarea" v-model="comment.content" placeholder="请输入内容"></uni-easyinput>
		   <view class="cmtfooter" @click="sendcomment"><text class="cmtbtn">发布</text></view>
		</view>
     </uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid: 0,
				comment:{
					orderid:0,
					order_table:"jyshop_order",
					content:"",
					comment_level:1
				},
		 
				trans_status_text:"",
	 
				suborders:[],
				orderinfo: {},
			};
		},
		onLoad(option) {
			this.orderid =option.orderid ||0;
			this.getOrderinfo();
		},
		methods: {
			applyservice(item){
				 
				 if(item.order_service_id==0){//未申请
					uni.navigateTo({
						url:"/pages/order/applyservice?order_table=jyshop_order_product&order_id="+item.id
					});
				}else{
					uni.navigateTo({
						url:"/pages/order/serviceinfo?id="+item.order_service_id
					});
				}
			
			},
			//确认收货
			fixOrder(){
				let that = this;
			 console.log("确认订单");
				this.$util.req("/order/fixorder",{id:this.orderid},true,function(res){
					uni.showToast({
						title:"确认收货完成"
					});
					setTimeout(()=>{
						that.orderinfo.trans_status=2; 
					},300);
				});
			},
			cannelorder(){
				console.log("去掉订单");
				let that = this;
				this.$util.req("/order/closeOrder",{id:this.orderid},true,function(res){
 
					that.$util.toast("取消完成",function(){
					 
							that.orderinfo.trans_status=2; 
					});
				 
				});
			},
			//评论类型
			changecmtlevel(e){
				this.comment.comment_level = e.target.value;
			},
			//打开评论
			opencomment(){
				this.$refs.popcomment.open();
			},
			sendcomment(){
				let that = this;
				this.comment.orderid = this.orderid;
				this.$util.req("/comment/save",this.comment,true,function(res){
					
					uni.showToast({
						title:"发布成功"
					});
					setTimeout(()=>{
						that.orderinfo.comment_status=1;
							that.$refs.popcomment.close();
					},300);
				
				});
			},
		 payit(){
		 	uni.navigateTo({
		 		url:"/pages/money/pay?orderid="+this.orderid+"&ordertable=jyshop_order"
		 	});
		 },
		 
			getOrderinfo() {
				let param = {
					id: this.orderid
				};
				let that = this;
				this.$util.req("/order/getInfo", param, true, function(res) {
					that.orderinfo = res.data;
		 
					that.suborders=res.data.suborderlist;
					  that.getTransStatus(res.data.trans_status);
 
				});
			},
			getTransStatus(status){
				switch (status) {
					case "0":
						this.trans_status_text = '待发货';
						break;
					case "1":
						this.trans_status_text = "已发货";
						break;
					case "2":
						this.trans_status_text = "确认收货";
						break;
				 
				}
			}
	 
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}
	.comment{
		
			background-color: #FFFFFF;
			padding: 20upx 0upx;
				color: #303133;
			.cmtheader{
				display:flex ;
				padding: 0upx 20upx;
				margin-bottom: 20upx;
				line-height: 48upx;
				 
			}
			.cmtcontent{
				margin-top: 20upx;
			}
			.cmtfooter{
				padding: 20upx 20upx;
				display: flex;
				justify-content: flex-end;
				.cmtbtn{
					padding: 10upx 60upx;
					border-radius: 10upx;
					border: 2upx solid #DCDFE6;
				
				}
			}
	}

	.pininfo {
		margin-top: 10upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.pin-head {
			display: flex;
			justify-content: space-between;
			padding: 20upx 10upx;
			color: $font-color-base;
		}

		.pin-user {
			image {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				border-radius: 100px;
				margin-left: 20upx;
			}

		}

		.shareoper {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10upx;
		}

		.share-btn {
			background-color: #ff0000;
			color: #FFFFFF;
			padding: 10upx 40upx;
			border-radius: 10upx;
		}
	}

	 
	.order-footer {
		background-color: #FFFFFF;
		position: fixed;
		width: 100%;
		padding: 20upx;
		bottom: 0upx;
		border-top: 1upx solid #DCDFE6;
.sbtn {
			border: 2upx solid $border-color-base;
			padding: 10upx;
			border-radius: 20upx;

		}

		.ser-shouhou {
			margin-right: 10upx;
		}

		.icon-xiaoxi:before {
			margin-right: 10upx;
			color: $font-color-spec;
		}
		.operbtn {
			display: flex;
			justify-content: flex-end;
			font-size: $font-base;

			.fbtn {
				border: 2upx solid $border-color-base;
				padding: 16upx;
				border-radius: 20upx;
				margin-left: 10upx;

			}

			.fixexpress {
				border: 2upx solid #FF6666;
				color: #FF6666;
			}

			.payit {
				background-color: #FF0000;
				color: #FFFFFF;
			}
		}
	}

	.orderinfo {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		color: $font-color-light;
		font-size: 28upx;
		margin-bottom: 10upx;
		.remark{
			display: flex;
			flex-direction: column;
			padding: 0 20upx;
			line-height: 64upx;
			.remark_content{
				color: $font-color-base;
				padding-left: 40upx;
			}
		}
		.item {

			display: flex;
			justify-content: space-between;
			padding: 0 20upx;
			line-height: 64upx;
		}
	}

	.head {
		background-color: #FF6666;
		height: 300upx;
		display: flex;
		align-items: center;

		.express {
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin: 0 $page-row-spacing;
			border-radius: 10upx;
			align-items: center;
			padding: 20upx 10upx;
			color: $font-color-base;

			.left {
				display: flex;
				align-items: center;
				.wuliuimg{
					width: 50upx;
					height: 50upx;
					padding-left: 10upx;
				}
				.wlstate {
					padding-left: 10upx;
					display: flex;
					flex-direction: column;

					.wlqs {
						color: #000000;
						font-size: 36upx;
						font-weight: bold;

					}

					.trace {
						font-size: 28upx;
						line-height: 48upx;
						color: $font-color-light;
					}
				}
			}

			.right {
				.wuliubtn {
					font-size: 32upx;
					border: 4upx solid $border-color-base;
					padding: 10upx 20upx;
					border-radius: 20upx;

				}
			}

		}

	}


	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;

		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			// padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}
			.pbottom{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				.shouhou{
					border: 2upx solid $border-color-base;
					padding: 14upx;
					border-radius: 10upx;
					margin-left: 10upx;
					font-size: $font-sm;
					color: $font-color-dark;
				}
			}	
			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
</style>
